// 分销等级

import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {message, Switch} from 'antd';
import ProTable from '@ant-design/pro-table';
import LevelTitle from "@/pages/distribution/DistributionLevel/components/LevelTitle";
import TaskLevel from "@/pages/distribution/DistributionLevel/components/TaskLevel";
import {
  distributionLevelDelete,
  DistributionLevelSearch,
  distributionLevelUpdata
} from "@/services/ant-design-pro/distribution";
import LevelUpdate from "@/pages/distribution/DistributionLevel/components/LevelUpdate";


const DistributionLevel = () => {
  const actionRef = useRef()
  const [searchValues,setSearchValue] = useState({})


  // 定义等级列表项 删除 功能
  const deleteDistributionLevel = async (id)=>{
    await distributionLevelDelete(id)
    message.success(`删除第${id}条成功`)
    actionRef.current?.reload()
  }

  // 定义表头字段
  const columns = [
    {
      title: 'ID',
      // width: 80,
      dataIndex: 'id',
      key:'id'
    },
    {
      title: '客服头像',
      dataIndex: 'image',
      key: 'image',
      valueType: 'image',
    },
    {
      title: '名称',
      dataIndex: 'position',
      key:'position'
    },
    {
      title: '等级',
      dataIndex: 'level',
      key:'level'
    },
    {
      title: '一级返上浮佣比例（%）',
      dataIndex: 'first_commission',
      key:'first_commission'
    },
    {
      title: '二级返佣上浮比例（%）',
      dataIndex: 'second_commission',
      key:'second_commission'
    },
    {
      title: '是否显示',
      dataIndex: 'is_show',
      key:'is_show',
      render: (_,record) =>{
        const ft = (a)=>{
          if(a){
            return 1
          }else{
            return 0
          }
        }
        return <Switch key={record.id} onChange={async (checked)=>{
          const {position,image,level,first_commission,second_commission} = record
          await distributionLevelUpdata(record.id,{position,image,level,first_commission,second_commission,is_show:ft(checked)}); message.success(`修改第${record.id}条状态成功`) }}
          defaultChecked={record.is_show} checkedChildren="显示" unCheckedChildren="隐藏" />
      }
    },
    {
      title: '操作',
      align:'center',
      valueType: 'option',
      fixed: 'right',
      key: 'option',
      render: (_,record) => [
        <TaskLevel/>,
        <LevelUpdate actionRef={actionRef} record={record}/>,
        <a key="link2" onClick={ ()=>{ deleteDistributionLevel(record.id) } }> 删除 </a>,
      ],
    },
  ]
  return (
    <div>
      <PageContainer
        header={{
          breadcrumb: {},
        }}
      >
        <LevelTitle key={'toubu'} setSearchValue={setSearchValue} searchValues={searchValues} actionRef={actionRef}/>
        <ProTable
          actionRef={actionRef}
          columns={columns}
          params={searchValues}
          request={async (params)=>{
            // console.log('搜索',searchValues);
            const {data,meta} = await DistributionLevelSearch({...params,...searchValues})

            return {
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          rowKey="key"
          pagination={{
            // showQuickJumper: true,
            pageSize: 10,
          }}
          options={false}
          search={false}
          dateFormatter="string"
        />
      </PageContainer>
    </div>
  );
};

export default DistributionLevel;

